{% extends "base.html" %}

<!--头部-->
{% block title %} pv节点 {% endblock %}
<!-停留的样式-->
<!--layui-nav-itemed 为开关-->
{% block nav-item-1 %} layui-nav-itemed {% endblock %}

<!--layui-this 停留的背景颜色-->
{% block nav-this-1-3 %} layui-this {% endblock %}


<!--内容-->
{% block content %}
    <span class="layui-breadcrumb">
      <a href="#">首页</a>
      <a href="#">Kubernetes</a>
      <a href="#">PersistentVolumes</a>
      <a><cite>创建</cite></a>
    </span>
    <hr>

        <div class="layui-card">
        <div class="layui-card-body">

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
          <legend>创建PersistentVolume</legend>
        </fieldset>
        <form class="layui-form " onclick="return false">
          <div class="layui-form-item">

            <label class="layui-form-label">名称：</label>
            <div class="layui-input-block">
              <input type="text" name="name" lay-verify="required" lay-reqtext="名称是必填项，不能为空！" placeholder="" autocomplete="off" class="layui-input">
            </div>

              <div class="layui-form-item" pane="">
                <label class="layui-form-label">存储容量：</label>
                <div class="layui-input-block">
                  <input type="radio" name="capacity" value="1Gi" title="1Gi" checked="">
                  <input type="radio" name="capacity" value="5Gi" title="5Gi">
                  <input type="radio" name="capacity" value="10Gi" title="10Gi">
                  <input type="radio" name="capacity" value="20Gi" title="20Gi" >
                  <input type="radio" name="capacity"  title="自定义" disabled="">
                </div>
              </div>

              <div class="layui-form-item" pane="">
                <label class="layui-form-label">访问模式：</label>
                <div class="layui-input-block">
                  <input type="radio" name="access_mode" value="ReadWriteMany" title="多节点读写" checked="">
                  <input type="radio" name="access_mode" value="ReadOnlyMany" title="多节点只读">
                  <input type="radio" name="access_mode" value="ReadWriteOnce" title="单节点读写">
                </div>
              </div>

            <div class="layui-inline">
              <label class="layui-form-label">存储类型：</label>
              <div class="layui-input-inline">
                <select name="storage_class">
                  <option value=""></option>
                  <optgroup label="单点存储(适合非核心业务)">
                    <option value="nfs">NFS</option>
                  </optgroup>
                  <optgroup label="分布式存储(暂不支持)">
                    <option value="cephfs">CephFS</option>
                    <option value="cephrbd">CephRBD</option>
                  </optgroup>
                </select>
              </div>
            </div>

              <div style="padding-left: 30px">
                 <label class="layui-form-label">服务器IP：</label>
                 <div class="layui-input-block">
                   <select name="server_ip"  lay-verify="required" lay-search="" lay-filter="select_ns2">
                      <option value="">直接选择或搜索选择</option>
                      <option value="192.168.31.62">172.17.0.3</option>
                      <option value="192.168.31.63">172.17.0.2</option>
                    </select>
                 </div>
                 <label class="layui-form-label">挂载路径：</label>
                 <div class="layui-input-block">
                  <input type="text" name="mount_path" lay-verify="required" lay-reqtext="名称是必填项，不能为空！" placeholder="示例：pv0001" autocomplete="off" class="layui-input">
                 </div>

              </div>

              <br>
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button type="submit" class="layui-btn" lay-submit="" lay-filter="btn">立即提交</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
              </div>

          </div>
        </form>

        </div>
    </div>


{% endblock %}

{% block js %}
<script>
layui.use(['table','form','layer'], function(){
  var table = layui.table;
  var layer = layui.layer;
  var form = layui.form;
  var $ = layui.jquery;

  // 监听提交
  form.on('submit(btn)', function (data) {
      data = data.field;
      csrf_token = $('[name="csrfmiddlewaretoken"]').val();
      data['csrfmiddlewaretoken'] = csrf_token;
        $.ajax({
            url: '{% url 'k8s:pv_api' %}',
            type: "POST",
            data: data,
            headers: {"X-CSRFToken": csrf_token},
            success: function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg, {icon: 6});
                    window.location.href = "{% url 'k8s:PersistentVolumes' %}"   // 刷新页面，并跳转
                } else {
                    layer.msg(res.msg, {icon: 5})
                }
            },
            error: function () {
                layer.msg("服务器接口异常",{icon: 5})
            }
        })
  })

});
</script>

{% endblock %}